<template>
	<div style='height:100%;'>
		<v-chart v-if='value' style='height: 100%;width: 100%;' :options='options'></v-chart>
		<loading v-else></loading>
	</div>
</template>

<script>
	export default {
		name : 'bar-chart',

		props : {
			value : {
				type : [Array, Object],
				default : function() {
					return []
				}
			}
		},
		
		data() {
			return {
			
			}
		},
		
		computed : {
			options () {
				var data = this.value
				var xAxisData = data.date
                var seriesData = [
                    {
                        name : '订单',
                        type: 'bar',
                        barWidth : '16px',
                        itemStyle : {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: ' #366eff  ' // 0% 处的颜色
                                }, {
                                    offset: 1, color: 'rgba(29, 205, 205, 0)' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        },
                        data : data.order
                    },
                    {
                        name : '金额',
                        type: 'line',
                        smooth : true,
                        symbol : 'none',
                        color : '#59ffaf',
                        data : data.amount
                    }
                ]
				
				var options =  {
					tooltip : {
						show : true,
						trigger : 'axis'
					},
					
                    title : {
                        left : 30,
                        text : '近7日订单/金额',
                        textStyle : {
                            color : '#f5f5f5',
                            fontSize : 14
                        }
                        
                    },
                    legend: {
                        align : 'auto',
                        top : 0,
                        icon : 'pin',
                        textStyle : {
                            color : '#fff',
                            fontSize : 14,
                            
                        },
                        data: ['订单', '金额']
                    },
                    color : ['#61bae3', '#1a7efc', '#39d1aa', '#eec152'],
					grid : {
						top : '40px',
						right : '0px',
						bottom : '20px',
						left : '70px'
					},

					xAxis: {
						type: 'category',
						axisLine : {
							lineStyle : {
								color : '#373f50'
							}
						},
						axisTick : {
							show : false
						},
						axisLabel : {
							show : true,
							color : '#a3a5a9'
						},
						data: xAxisData
					},
					yAxis: {
						type: 'value',
						axisLine : {
							lineStyle : {
								color : '#373f50'
							}
						},
						axisTick : {
							show : false
						},

						axisLabel : {
							show : true,
							color : '#a3a5a9'
						},

						splitLine : {
							show : true,
							lineStyle : {
								color : '#373f50'
							}
						}
					},
					
					series: seriesData
				}

				return options
			}
		}
	}
</script>